<template>
    <div class="layout">
        <div class="header_layout" :class="{ 'fixed': isFixed }" ref="header">
            <div class="header_left">
                <div class="logo">JIYUAN</div>
            </div>
            <div class="header_center">
                <span>首页</span>
                <span @click="push('/PageCommunity')">社区</span>
                <span>动漫</span>
                <span>攻略</span>
                <span @click="push('/IndividualCenter')">个人中心</span>
                <span @click="push('/ReleasePage')">发布</span>
                <span v-if=" this.$store.state.user.id" @click="push('/LoginView')">登陆</span>
            </div>
            <div class=" header_right">
                <div class="user"></div>
            </div>

        </div>
        <div class="main">
            <router-view></router-view>
        </div>


    </div>
</template>

<script>
export default {
    data() {
        return {
            crumbs:[{id:1,name:"动漫",data:{id:1,name:"原神"}}],
            isFixed: false,
            headerTop: 0,
            login_display:false
        }
    },
    methods: {
        push(route) {
            this.$router.push(route)
            // if ()
            this.title = event.target.innerHTML
        },
        handleScroll() {
            // 当滚动距离大于头部元素的初始位置 + 70px 时，设置为固定状态
            if (window.pageYOffset > this.headerTop + 70) {
                this.isFixed = true;
            } else {
                this.isFixed = false;
            }
        },
        logins() {
            this.login_display = !this.login_display
            console.log(this.login_display);
            
        }
        // const header_layout = 
    },
    mounted() {
        // 获取头部元素的初始位置
        this.headerTop = this.$refs.header.offsetTop;

        // 监听页面滚动事件
        window.addEventListener('scroll', this.handleScroll);
    },
    destroyed() {
        // 在组件销毁时移除事件监听
        window.removeEventListener('scroll', this.handleScroll);
    },
}
</script>

<style lang="less" scoped>
.layout {
    width: 1420px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    background-color: #f6f6f6;
    .header_layout {
        position: fixed;
        display: flex;
        justify-content: center;
        width: 100%;
        height: 50px;
        margin-bottom: 20px;
        background-color: #000000;
        z-index: 999;

        .header_left {
            width: 20%;

            .logo {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100px;
                height: 50px;
                // line-height: 50px;
            }
        }
        .header_center {
            background-color: #000000;
            display: flex;
            justify-content: left;
            span{
                width: 200px;
                display: flex;
                justify-content: center;
                font-size: 16px;
                align-items: center;
                color: #ffffff;
                transition:.2s  all ease-in-out;
        
            }
            span:hover{
                background-color: #ffffff;
                    color: #ff6a00;
                }
            
        }
        .header_right {
            width: 20%;
            // background-color: #ff8b8b;
        }
    }
    .main {
        display: flex;
        height: 100vh;
        // justify-content: center;
        flex-direction: column;
        align-items: center;
        width: 1420px;
        justify-content: flex-end;
        // background-color: #9f9f9f;
        // height:calc(100vh - 70px);
    }
}
</style>